<template>
	<view class="detail">
		<view class="searchHeads" v-if="type !== ''">
			<input type="text" placeholder="搜索设备" class="inputs" placeholder-class="places" v-model="iemi"/>
			<image src="../../static/index/search.png" mode="" class="search" @tap="params.iemi = iemi, getDetail(1)"></image>
			<image src="../../static/index/whiteCode.png" class="codeImg" @tap="scan()"></image>
		</view>
		<map class="mapOut" :scale="13" :enable-satellite="enable"
			:latitude="latitude"
			:longitude="longitude"
			:markers="markers"
			:style="{'height': height, 'top': top}"
		>
		</map>
		
		<cover-view class="mapType" :style="{'top': typeTop}">
			<cover-view class="boxIn " :class="!enable ? 'selectIn' : ''" @tap="enable = false">地图</cover-view>
			<cover-view class="boxIn" :class="enable ? 'selectIn' : ''" @tap="enable = true">卫星</cover-view>
		</cover-view>
		<cover-view class="lookBtn" @tap="showDetail()">
			设备详情
		</cover-view>
		<cover-view class="detailFoot" v-if="show">
			<cover-view class="detailTitle">
				设备详情
				<cover-image src="../../static/index/close.png" class="close" @tap="show = false"></cover-image>
			</cover-view>
			<cover-view class="detailBottom"></cover-view>
			<cover-view class="listIn">
				<cover-view class="labelText">设备编号</cover-view>
				<cover-view class="listContent" style="width: 500rpx;text-align: right;">{{detail.iemi}}</cover-view>
			</cover-view>
			
			<cover-view class="listIn">
				<cover-view class="labelText">设备地址</cover-view>
				<cover-view class="listContent addresss">{{detail.city}}{{detail.area}}{{detail.address}}</cover-view>
			</cover-view>
			<cover-view class="listIn">
				<cover-view class="labelText">设备状态</cover-view>
				
				<cover-view class="listContent redStatus" v-if="detail.status === 'warn'">预警</cover-view>
				<cover-view class="listContent redStatus" v-if="detail.status === 'error'">
					<cover-view v-if="detail.wareType === 1">打开</cover-view>
					<cover-view v-if="detail.wareType === 2">报警</cover-view>
					<cover-view v-if="detail.wareType === 3">报警</cover-view>
					<cover-view v-if="detail.wareType === 4">预警</cover-view>
				</cover-view>
				<cover-view class="listContent redStatus" v-if="detail.status === 'off'">离线</cover-view>
				<cover-view class="listContent greenStatus" v-if="detail.status === 'normal'">正常</cover-view>
			</cover-view>
			<cover-view class="listIn">
				<cover-view class="labelText">设备报警类型</cover-view>
				<template  v-for="item in wareType"  >
				<cover-view class="listContent" :key="item.num" v-if="item.num === detail.wareType">
					
						{{item.name}}
				</cover-view>
				</template>
			</cover-view>
			<template v-if="detail.wareType === 2">
				<cover-view class="listIn" >
					<cover-view class="labelText">压力</cover-view>
					<cover-view class="listContent" style="display: flex;justify-content: flex-end;align-items: center;">
						<cover-view style="color: rgb(242, 99, 123);width: 300rpx;text-align: right;">{{detail.yali}}</cover-view>
						<cover-view>{{detail.unit}}</cover-view>
					</cover-view>
				</cover-view>
				<cover-view class="listIn" >
					<cover-view class="labelText">温度℃</cover-view>
					<cover-view class="listContent" style="width: 500rpx;text-align: right;">{{detail.temperature}}</cover-view>
				</cover-view>
			</template>
			<cover-view class="listIn" >
				<cover-view class="labelText">电压</cover-view>
				<cover-view class="listContent" style="width: 500rpx;text-align: right;">{{detail.dianya}}</cover-view>
			</cover-view>
			<cover-view class="listIn" >
				<cover-view class="labelText">电量%</cover-view>
				<cover-view class="listContent" style="width: 500rpx;text-align: right;">{{detail.dianliang}}</cover-view>
			</cover-view>
			<template v-if="detail.wareType === 4">
				<cover-view class="listIn" >
					<cover-view class="labelText">气体浓度</cover-view>
					<cover-view class="listContent" style="width: 500rpx;text-align: right;">{{detail.ppm}}</cover-view>
				</cover-view>
			</template>
			<cover-view class="listIn" v-if="detail.upTime !== null">
				<cover-view class="labelText">上报时间</cover-view>
				<cover-view class="listContent" style="width: 500rpx;text-align: right;">
				{{detail.upTime.replace('T', ' ').split('.')[0]}}  
				</cover-view>
			</cover-view>
			<cover-image src="../../static/btn.png" style="width: 300rpx;height: 80rpx;
			position: fixed;
			bottom: 60rpx;
			left: calc(50% - 150rpx);"
			 @tap="lookHistory()"></cover-image>
			<!-- <cover-view class="lookBtn" style="padding: 0 20rpx;" @tap="lookHistory()">查看历史数据</cover-view> -->
		</cover-view>
	</view>
</template>

<script>
	var QQMapWX = require('../../sdk/qqmap-wx-jssdk.js');
	 
	// 实例化API核心类
	var qqmapsdk = new QQMapWX({
	    key: 'DCIBZ-U6OKU-I5GV6-4SLWY-UTOCF-63BKT' ,// 必填
			
// DCIBZ-U6OKU-I5GV6-4SLWY-UTOCF-63BKT
	});
	import {getDetail} from './js/api.js';
	export default{
		data () {
			return {
				enable: false,
				latitude: '',
				longitude: '',
				height: '',
				show: false,
				params: {
					unionid: uni.getStorageSync('unionid')
				},
				detail: {},
				wareType: [
					{
						num: 1,
						name: '放散'
					},
					{
						num: 2,
						name: '压力'
					},
					{
						num: 3,
						name: '过滤'
					},
					{
						num: 4,
						name: '气体'
					}
				],
				type: '',
				top: 0,
				typeTop: '20px',
				iemi: '',
				markers: []
			}
		},
		onLoad(option) {
			if (option.type) {
				this.type = option.type
				let s = uni.getSystemInfoSync().screenHeight - 64
				this.top = '64px'
				this.typeTop = '84px'
				this.height = s + 'px'
			} else {
				this.top = 0
				this.typeTop = '20px'
				this.height = uni.getSystemInfoSync().screenHeight + 'px'
			}
			this.iemi = option.iemi
			// uni.getLocation({
			// 	type: 'gcj02',
			// 	success: (res) => {
			// 		console.log(res)
					
			// 	},
			// 	fail: (err) => {
			// 		console.log(err)
			// 	}
			// })
			this.params.iemi = option.iemi
			this.getDetail()
		},
		methods:{
			scan () {
				uni.scanCode({
					onlyFromCamera: true,
				    success:  (res) => {
						this.iemi = res.result
						this.params.iemi = res.result
						this.getDetail(1)
				    }
				});
			},
			showDetail () {
				
				this.$nextTick(() => {
					this.show = true
				})
			},
			getDetail (i) {
				getDetail(this.params).then((res) => {
					if (res.code == 200) {
						this.detail = res.data
						if (this.detail.city.indexOf('-') !== -1) {
							this.detail.city = this.detail.city.split('-')[1]
						}
						if (this.detail.area.indexOf('-') !== -1) {
							this.detail.area = this.detail.area.split('-')[1]
						}
						let address = '' + this.detail.city + this.detail.area + this.detail.address
						console.log(address)
						qqmapsdk.geocoder({
							address: address,
							success: (res) => {
								var longitude = res.result.location.lng
								var latitude = res.result.location.lat
								console.log(longitude)
								console.log(latitude)
								this.latitude = latitude
								this.longitude = longitude
								let markers = [{
									id: 0,
									title: res.result.title,
									latitude: latitude,
									longitude: longitude,
									iconPath: '../../static/loc.png',//图标路径
									width: 20,
									height: 28,
									// callout: { //可根据需求是否展示经纬度
									// 	content: latitude + ',' + longitude,
									// 	color: '#000',
									// 	display: 'ALWAYS'
									// }
								}]
								this.$set(this.markers, 0, markers[0])
								console.log(this.markers)
								// this.markers = markers
							},
							complete: (err) => {
								console.log(err)
							}
						})
						
					} else {
						if (i === 1) {
							uni.showToast({
								title:res.msg,
								icon: 'none',
								duration:2000
							})
						} else {
							uni.showModal({
								title: '提示',
								content: res.msg,
								showCancel: false,
								confirmText: '确定',
								success: (res) => {
									uni.navigateBack()
								}
							})
						}
					}
				})
			},
			lookHistory () {
				uni.navigateTo({
					url: '../list/historyList?iemi=' + this.params.iemi + '&wareType=' + this.detail.wareType
				})
			}
		}
	}
</script>

<style lang="scss">
	.detail{
		height: 100vh;
		overflow: hidden;
		.mapOut{
			width: 100%;
			height: 746rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
		.mapType{
			position: fixed;
			top: 20rpx;
			right: 30rpx;
			width: 180rpx;
			height: 54rpx;
			background: #fff;
			border-radius: 5rpx;
			overflow: hidden;
			color: #333333;
			font-size: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.boxIn{
				width: 50%;
				text-align: center;
				height: 54rpx;
				line-height: 54rpx;
			}
			.selectIn{
				color: #FFFFFF;
				background-color: #1C80CF;
			}
		}
		.detailFoot{
			position: absolute;
			top: 580rpx;
			left: 0;
			width: 100%;
			height: calc(100vh - 580rpx);
			// margin-top: -54rpx;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			background-color: rgba($color: #fff, $alpha: 1.0);
			z-index: 999;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-direction: column;
			.detailTitle{
				width: calc(100% - 60rpx);
				display: flex;
				justify-content: space-between;
				align-items: center;
				line-height: 100rpx;
				// border-bottom: 2rpx solid #DDDDDD;
				color: #333333;
				font-size: 32rpx;
				font-weight: 500;
				.close{
					width: 26rpx;
					height: 26rpx;
				}
			}
			.detailBottom{
				width: calc(100% - 60rpx);
				height: 2rpx;
				background-color: #DDDDDD;
			}
			.listIn{
				width: calc(100% - 60rpx);
				// padding: 0 10rpx;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				// margin-right: 5rpx;
				.labelText{
					color: #999999;
				}
				.listContent{
					color: #333333;
				}
				.addresss{
					width: 480rpx;
					text-align: right;
					// flex-wrap: wrap;
					word-break:break-all;
					white-space: pre-wrap;
				}
				.redStatus{
					color: #EE2A0E;
				}
				.greenStatus{
					color: #5BB85F;
				}
			}
			// .listIn:last-child{
			// 	align-items: flex-start;
			// 	justify-content: space-between;
			// 	.listContent{
			// 		// width: 420rpx;
			// 		text-align: right;
			// 		// flex-wrap: wrap;
			// 		white-space: pre-wrap,
			// 	}
			// }
		}
		.lookBtn{
			position: fixed;
			bottom: 60rpx;
			left: calc(50% - 110rpx);
			width: 220rpx;
			height: 80rpx;
			background: #2DBDA2;
			box-shadow: 0px 4rpx 20rpx 0px rgba(102, 102, 102, 0.5);
			border-radius: 5rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
			font-size: 34rpx;
		}
		.searchHeads{
			width: 100%;
			height: 132rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			overflow: hidden;
			background-color: #2DBDA2;
			border-top: 1rpx solid #FFFFFF;
			.inputs{
				margin-left: 30rpx;
				width: 510rpx;
				height: 68rpx;
				background-color: #F6F6F6;
				border-radius: 10rpx;
				padding-right: 80rpx;
				font-size: 28rpx;
				padding-left: 20rpx;
			}
			.search{
				position: absolute;
				right: 130rpx;
				width: 28rpx;
				height: 28rpx;
			}
			.places{
				color: #999999;
				font-size: 28rpx;
			}
			.codeImg{
				width: 46rpx;
				height: 46rpx;
				margin-right: 30rpx;
			}
		}
	}
</style>
